pub mod github_node_ref {
use web_sys::Node;
use yew::prelude::*;

pub enum Msg {
    Hover,
}

#[derive(Properties, PartialEq)]
pub struct Props {
    pub on_hover: Callback<()>,
}

pub struct InputComponent;

impl Component for InputComponent {
    type Message = Msg;
    type Properties = Props;

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::Hover => {
                // use the callback method immediately
                ctx.props().on_hover.emit(());
                // not to render the Component
                false
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <input
                type="text"
                class="input-component"
                onmouseover={ctx.link().callback(|_| Msg::Hover)}
            />
        }
    }
}

use web_sys::HtmlInputElement;
pub struct NodeRefApp {
    refs: Vec<NodeRef>,
    focus_index: usize,
}

pub enum MainMsg {
    HoverIndex(usize),
}

impl NodeRefApp {
    fn apply_focus(&self) {
        if let Some(input) = self.refs[self.focus_index].cast::<HtmlInputElement>() {
            input.focus().unwrap();
        }
    }
}

impl Component for NodeRefApp {
    type Message = MainMsg;

    type Properties = ();

        fn create(_ctx: &Context<Self>) -> Self {
            Self { 
            focus_index: 0,
            refs: vec![NodeRef::default(), NodeRef::default()],
        }
    }
    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            MainMsg::HoverIndex(index) => {
                self.focus_index = index;
                self.apply_focus();
                false
            }
        }
    }
    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <div class="Node-Ref-hover-control" style="background-color: grey;">
                <label>{"Using tag ref: "}</label>
                <input
                    type="text" 
                    ref={self.refs[0].clone()} 
                    class="input-element"
                    onmouseover={ctx.link().callback(|_| MainMsg::HoverIndex(0))} 
                />
                <br/>
                <label>{"Using component ref: "}</label>
                <InputComponent
                    ref={self.refs[1].clone()}
                    on_hover={ctx.link().callback(|_| MainMsg::HoverIndex(1))}
                />
            </div>
        }
    }
}
}